/*
 * @Author: FanWeiHua
 * @Date: 2021-07-16 14:28:55
 * @LastEditTime: 2021-07-23 14:43:05
 * @Description: 在线coding
 */
'use strict';
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin'); // 每次构建前清理webpack配置的output目录，这样只会生成用到的文件
const { getIPAddress } = require('./common/util.js');
module.exports = async () => {
  const portfinder = require('portfinder');
  portfinder.basePort = 9000;
  const port = await portfinder
    .getPortPromise()
    .then(port => {
      return port;
    })
    .catch(err => {
      console.log(err);
      return 9091;
    });
  return {
    mode: 'development',
    devtool: 'source-map',
    entry: path.resolve(__dirname, '../main/codeEditor/', 'index.js'),
    output: {
      path: path.join(__dirname, '../dist/codeEditor'),
      filename: './static/js/[name]-bundle.js',
      publicPath: '/'
    },
    module: {
      rules: [
        {
          test: /\.js/,
          enforce: 'pre',
          include: /node_modules[\\\/]monaco-editor[\\\/]esm/,
          use: MonacoWebpackPlugin.loader
        },
        {
          test: /\.js/,
          exclude: /node_modules/,
          use: ['babel-loader', 'eslint-loader']
        },
        {
          test: /\.css$/i,
          use: [
            'style-loader',
            {
              loader: require.resolve('css-loader'),
              options: {
                modules: false
              }
            }
          ]
        },
        {
          test: /\.less$/i,
          use: [
            'style-loader',
            {
              loader: require.resolve('css-loader'),
              options: {
                importLoaders: 2,
                modules: false
              }
            },
            {
              loader: 'postcss-loader',
              options: {
                plugins: () => {
                  const pluginArr = [
                    require('postcss-flexbugs-fixes'),
                    require('autoprefixer')({
                      overrideBrowserslist: ['last 2 versions', '> 5%']
                    })
                  ];
                  return pluginArr;
                }
              }
            },
            {
              loader: 'less-loader',
              options: {
                lessOptions: {
                  javascriptEnabled: true
                }
              }
            }
          ]
        },
        {
          test: /\.(png|jpg|gif|svg|ico|gltf|glb|bmp)$/i, // i不区分大小写
          use: [
            {
              loader: 'url-loader', // url-loader(可进行构建配置)作用与file-loader相同 内部使用file-loader
              options: {
                limit: 1024,
                name: '[name]_[hash:8].[ext]',
                outputPath: './static/images'
              }
            }
          ]
        },
        // 字体 图标
        {
          test: /\.(ttf|eot|woff|woff2|otf)$/i,
          use: [
            {
              loader: 'url-loader', // url-loader(可进行构建配置)作用与file-loader相同 内部使用file-loader
              options: {
                limit: 1024,
                name: '[name]_[hash:8].[ext]',
                outputPath: './static/fonts'
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new MonacoWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: path.resolve(__dirname, '../main/codeEditor/', 'index.html'),
        filename: 'index.html',
        inject: true,
        minify: false,
        chunksSortMode: 'auto'
      })
    ],
    resolve: {
      extensions: ['.js']
    },
    devServer: {
      historyApiFallback: {
        index: 'dist/index.html'
      },
      port: port,
      host: getIPAddress(),
      hot: true, // 实时刷新
      overlay: true, // 全屏覆盖浏览器
      stats: 'errors-only', // 只显示包中的错误
      open: true // 服务启动时，打开浏览器
    }
  };
};
